﻿@model QuanLyGiaoVuUI.Models.LopMonHoc.ChonLichGiangDayDialogViewModel

@{
    Layout = null;
}

<style>
    body {
        background-color: #2E5E79 !important;
    }

    .hidden {
        display: none;
    }

    .page-title {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
    }

    .page-content {
        overflow: hidden;
    }

    .class-list {
        float: left;
        width: 13%;
        margin-left: 10px;
        margin-top: 10px;
        border: 1px solid #1486c8;
        min-height: 40px;
    }

    .class-item, .chosen-class-item {
        cursor: pointer;
        background-color: #DA4F49 !important;
        background-image: -moz-linear-gradient(center top, #EE5F5B, #BD362F) !important;
        background-image: -webkit-linear-gradient(center top, #EE5F5B, #BD362F) !important;
        background-image: -linear-gradient(center top, #EE5F5B, #BD362F) !important;
        background-image: -o-linear-gradient(center top, #EE5F5B, #BD362F) !important;
        background-repeat: repeat-x;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        border: 1px solid #888;
        border-radius: 4px 4px 4px 4px;
        font-size: smaller;
        line-height: normal;
        overflow: hidden;
        padding: 3px;
        text-shadow: none;
        white-space: nowrap;
        margin: 2px;
    }

    .selected {
        color: #4cff00 !important;
    }

    .timetable {
        border: 1px solid #DDDDDD;
        border-radius: 4px 4px 4px 4px;
        margin: 0 0 10px;
        padding: 0;
        position: relative;
        margin-top: 10px;
    }

        .timetable table {
            width: 100%;
            background-color: #fff;
            border-collapse: collapse;
        }

            .timetable table thead {
                background-color: rgba(125, 125, 125, 0.1);
            }

                .timetable table thead tr td {
                    text-align: center;
                }

            .timetable table tbody tr {
                height: auto;
            }

                .timetable table tbody tr td {
                    min-width: 250px;
                    width: 50%;
                    font-size: 15px;
                    border: 1px solid rgba(125, 125, 125, 0.1);
                }

    
    .tableCell td {
        height: 30px;
        border: none !important;
    }
        @if (Model.SoTinChiLyThuyet <= 2 || Model.LaLopThucHanh)
        {
            @Html.Raw(".selectableCell td:hover { background-color: #1486c8;}")
        }
        else
        {
            @Html.Raw("td.selectableCell:hover { background-color: #1486c8; }")
        }

    .selectedCell {
        background-color: red;
    }

    .tableCell table {
        background-color: transparent !important;
        margin-bottom: 0px;
    }

    page-content ul {
        margin: 0px;
        padding: 0px;
    }

        page-content ul li {
            list-style: none;
            font-size: 15px;
            cursor: pointer;
            background-color: #DA4F49;
            background-image: -moz-linear-gradient(center top, #EE5F5B, #BD362F);
            background-image: -webkit-linear-gradient(center top, #EE5F5B, #BD362F);
            background-image: -linear-gradient(center top, #EE5F5B, #BD362F);
            background-image: -o-linear-gradient(center top, #EE5F5B, #BD362F);
            background-repeat: repeat-x;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border: 1px solid #888;
            border-radius: 4px 4px 4px 4px;
            font-size: smaller;
            line-height: normal;
            overflow: hidden;
            padding: 3px;
            text-shadow: none;
            white-space: nowrap;
            margin: 2px;
        }

            page-content ul li.selected {
                background-image: -moz-linear-gradient(center top, #4cff00, #BD362F);
                background-image: -webkit-linear-gradient(center top, #4cff00, #BD362F);
                background-image: -ms-linear-gradient(center top, #4cff00, #BD362F);
                background-image: -linear-gradient(center top, #4cff00, #BD362F);
                background-image: -o-linear-gradient(center top, #4cff00, #BD362F);
                background-color: #4cff00;
            }

    table .sub-table td {
        border: #1486c8 solid 1px;
        text-align: center;
    }

    .tableCell table tbody tr td.selected {
        background-image: -moz-linear-gradient(center top, #4cff00, #BD362F);
        background-image: -webkit-linear-gradient(center top, #4cff00, #BD362F);
        background-image: -ms-linear-gradient(center top, #4cff00, #BD362F);
        background-image: -linear-gradient(center top, #4cff00, #BD362F);
        background-image: -o-linear-gradient(center top, #4cff00, #BD362F);
        background-color: #4cff00;
    }

    .selectable {
        background: aliceBlue !important;
    }

        .selectable:hover {
            background-color: red !important;
        }

    #context-menu a {
        border: 1px solid #0094ff;
        text-decoration: none;
        padding: 10px;
        margin: 0 auto;
        clear: both;
        width: 90%;
        float: left;
        margin: 0 auto;
        text-align: center;
        margin-top: 10px;
    }

    .title-column {
        width: 50px !important;
        min-width: 50px !important;
    }

    .tooltip {
        font-size: 12px;
    }

    #titleText {
        float: left;
    }

        #titleText span {
            font-size: 22px;
            font-family: 'Ubuntu',Tahoma,sans-serif;
            font-weight: bold;
            color: #fff;
            line-height: normal;
            margin-left: 20px;
        }

    .actionMenu {
        float: right;
        position: relative;
    }

    .unselectable {
        background-color: #084093;
    }
</style>
@Html.HiddenFor(m => m.SoTinChiLyThuyet)
@Html.CheckBoxFor(m => m.LaLopThucHanh, new { @class = "hidden"})
<div class="page-content">
    <div class="timetable">
        <table style="margin-bottom: 0;">
            <thead>
                <tr>
                    <td></td>
                    <td>
                        <table style="margin-bottom: 0;">
                            <tr>
                                <td colspan="2">Sáng
                                </td>
                            </tr>
                            <tr>
                                <td>Ca 1
                                </td>
                                <td>Ca 2
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table style="margin-bottom: 0;">
                            <tr>
                                <td colspan="2">Chiều
                                </td>
                            </tr>
                            <tr>
                                <td>Ca 3
                                </td>
                                <td>Ca 4
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="title-column">Thứ 2</td>
                    <td class="tableCell selectableCell" id="h1">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c1"></td>
                                <td class="tableCell selectableCell" id="c2"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="tableCell selectableCell" id="h3">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c3"></td>
                                <td class="tableCell selectableCell" id="c4"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="title-column">Thứ 3</td>
                    <td class="tableCell selectableCell" id="h5">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c5"></td>
                                <td class="tableCell selectableCell" id="c6"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="tableCell selectableCell" id="h7">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c7"></td>
                                <td class="tableCell selectableCell" id="c8"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="title-column">Thứ 4</td>
                    <td class="tableCell selectableCell" id="h9">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c9"></td>
                                <td class="tableCell selectableCell" id="c10"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="tableCell selectableCell" id="h11">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c11"></td>
                                <td class="tableCell selectableCell" id="c12"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="title-column">Thứ 5</td>
                    <td class="tableCell selectableCell" id="h13">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c13"></td>
                                <td class="tableCell selectableCell" id="c14"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="tableCell selectableCell" id="h15">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c15"></td>
                                <td class="tableCell selectableCell" id="c16"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="title-column">Thứ 6</td>
                    <td class="tableCell selectableCell" id="h17">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c17"></td>
                                <td class="tableCell selectableCell" id="c18"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="tableCell selectableCell" id="h19">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c19"></td>
                                <td class="tableCell selectableCell" id="c20"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="title-column">Thứ 7</td>
                    <td class="tableCell selectableCell" id="h21">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c21"></td>
                                <td class="tableCell selectableCell" id="c22"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="tableCell selectableCell" id="h23">
                        <table>
                            <tr>
                                <td class="tableCell selectableCell" id="c23"></td>
                                <td class="tableCell selectableCell" id="c24"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="xuatLichDialog"></div>
<div class="hidden" id="khaNangKhongDuocChon">
    <ul>
        @foreach (QuanLyGiaoVuUI.Models.LopMonHoc.KhaNangObject kn in Model.DanhSachKhongDuocChon)
        {
            if (kn.KhaNangString.Length > 0)
            { 
                <li data-khanang="@kn.KhaNangString" data-sotinchilt="@kn.SoTinChiLyThuyet"></li>     
            }
        }
    </ul>
</div>

<script>
    $(document).ready(function () {
        var SoTinChiLT = parseInt($("#SoTinChiLyThuyet").val());
        var LaLopThucHanh = $("#LaLopThucHanh").is(":checked");
        $("#khaNangKhongDuocChon").find("li").each(function () {
            var khaNang = $(this).data("khanang");
            var soTinChiLT = parseInt($(this).data("sotinchilt"));
            var khaNangInt = parseInt(khaNang);
            if (soTinChiLT >= 3) {
                if (khaNangInt % 2 == 0) {
                    khaNangInt = khaNangInt - 1;
                }
                $("#h" + khaNangInt).addClass("unselectable");
                $("#h" + khaNangInt).removeClass("selectableCell");
                $("#c" + khaNangInt).removeClass("selectableCell");
                $("#c" + (khaNangInt + 1)).removeClass("selectableCell");
            }
            else {
                if (SoTinChiLT >= 3) {
                    if (khaNangInt % 2 == 0) {
                        khaNangInt = khaNangInt - 1;
                    }
                    $("#h" + khaNangInt).addClass("unselectable");
                    $("#h" + khaNangInt).removeClass("selectableCell");
                    $("#c" + khaNangInt).removeClass("selectableCell");
                    $("#c" + (khaNangInt + 1)).removeClass("selectableCell");
                }
                else {
                    $("#c" + khaNangInt).addClass("unselectable");
                    $("#c" + khaNangInt).removeClass("selectableCell");
                }
            }
        });

        $(".selectableCell").bind("click", function () {
            var id = $(this).attr("id");
            var pre = id.substring(0, 1);
            var index = id.substr(1, id.length - 1);
            if (SoTinChiLT <= 2 || LaLopThucHanh) {
                if (pre == 'c') {
                    ChonLichGiangDayObject.KhaNangDuocChon = index;
                    ChonLichGiangDayObject.SoTinChiLT = SoTinChiLT;
                    ChonLichGiangDayObject.LaLopThucHanh = LaLopThucHanh;
                    $(".selectableCell").removeClass("selectedCell");
                    $(this).addClass("selectedCell");
                }
            }
            else {
                if (pre == 'h') {
                    var indexInt = parseInt(index);
                    if (indexInt % 2 == 0)
                        indexInt--;
                    ChonLichGiangDayObject.KhaNangDuocChon = indexInt;
                    ChonLichGiangDayObject.SoTinChiLT = SoTinChiLT;
                    ChonLichGiangDayObject.LaLopThucHanh = LaLopThucHanh;
                    $(".selectableCell").removeClass("selectedCell");
                    $(this).addClass("selectedCell");
                }
            }
        });
    });

    var ChonLichGiangDayObject = new function () {
        this.KhaNangDuocChon = null;
        this.SoTinChiLT = null;
        this.LaLopThucHanh = false;
    }
</script>
